<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :title="getTitle"
    width="1000"
    :showFooter="showFooter"
    destroyOnClose
  >
    <div class="jeecg-basic-table-form-container">
      <a-descriptions title="打款银行信息" bordered col="3">
        <a-descriptions-item label="打款户名" >{{recordData.name}}</a-descriptions-item>
        <a-descriptions-item label="打款账户" >{{recordData.account}}</a-descriptions-item>
        <a-descriptions-item label="打款开户行" >{{recordData.bankName}}</a-descriptions-item>
      </a-descriptions>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button v-if="userStore.getUserInfo.userType==2&&userStore.getUserInfo.middleOptAuth!=2" type="primary"
                  @click="handleAdd" preIcon="ant-design:plus-outlined"> 设置白名单</a-button>
      </template>
      <!--操作栏-->
      <template #action="{ record }" >
        <TableAction :actions="getTableAction(record)" />
      </template>
      <!--关联状态插槽-->
      <template #stscodSlot="{record}">
        <a-tag v-if="record.stscod=='A'" color="green">生效</a-tag>
        <a-tag v-if="record.stscod=='W'" color="red">银行处理中</a-tag>
      </template>
      <!--入账方式插槽-->
      <template #tlyoprSlot="{record}">
        <a-badge v-if="record.tlyopr=='Y'" color="blue" text="非关联收款入账付方指定子单元" />
        <a-badge v-if="record.tlyopr=='N'" color="cyan" text="非关联收款入账默认子单元" />
        <a-badge v-if="record.tlyopr=='R'" color="green" text="非关联收款拒绝入账" />
      </template>
    </BasicTable>

    <!-- 表单区域 -->
    <CaishuiBusinessBankWhiteModal ref="registerModal" @success="handleSuccess"></CaishuiBusinessBankWhiteModal>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, useAttrs } from "vue";
import { BasicDrawer, useDrawerInner } from "/@/components/Drawer";
import { BasicTable, TableAction } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { whiteListColumns } from "../CaishuiBusinessBank.data";
import { delWhiteList, whiteList } from "../CaishuiBusinessBank.api";
import { useMessage } from "/@/hooks/web/useMessage";
import { useUserStore } from "/@/store/modules/user";
import CaishuiBusinessBankWhiteModal from "./CaishuiBusinessBankWhiteModal.vue";

const userStore = useUserStore();
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const attrs = useAttrs();
  const showFooter = ref(false);
  //获取标题
  const getTitle = ref("关联付款方信息列表");
  const queryParam = ref<any>({});
  const recordData = ref<any>({});
  const { createMessage } = useMessage();
  const registerModal = ref();

  //抽屉赋值
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
    recordData.value = data.record;
  });
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '',
      api: whiteList,
      columns: whiteListColumns,
      canResize:false,
      useSearchForm: false,
      striped: true,
      showIndexColumn: true,
      showActionColumn: true,
      beforeFetch: (params) => {
        params.serviceCompanyId = recordData.value.serviceCompanyId;
        params.subAccountId = recordData.value.subAccountId;
        return Object.assign(params, queryParam.value);
      },
      afterFetch: (data) => {

      },
    },
  });
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;

  /**
   * 添加事件
   */
  function handleAdd(){
    registerModal.value.disableSubmit = false;
    registerModal.value.add({
      serviceCompanyId: recordData.value.serviceCompanyId,
      subAccountId: recordData.value.subAccountId,
      payName: recordData.value.accountName,
    });
  }

  /**
   * 删除事件
   */
  function handleDel(record){
    delWhiteList({
      serviceCompanyId: recordData.value.serviceCompanyId,
      subAccountId: recordData.value.subAccountId,
      payName: record.dmanam,
      payAccount: record.rltacc,
    }).then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        reload();
      } else {
        createMessage.warning(res.message);
      }
    });
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '删除',
        icon: 'ant-design:delete-outlined',
        ifShow: userStore.getUserInfo.userType==2&&userStore.getUserInfo.middleOptAuth!=2,
        popConfirm: {
          title: '确认要删除吗？',
          confirm: handleDel.bind(null,record),
        },
      },
    ];
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    reload();
  }

</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
  margin-bottom: 10px;
  .table-page-search-submitButtons {
    display: block;
    white-space: nowrap;
  }
  .query-group-cust{
    width: calc(50% - 15px);
    min-width: 100px !important;
  }
  .query-group-split-cust{
    width: 30px;
    display: inline-block;
    text-align: center
  }
}
</style>
